<template>
    <div id="userLogin">
        <div class="bg">
            <div class="container">
                <div class="line bouncein">
                    <div class="xs6 xm4 xs3-move xm4-move">
                        <div style="height: 150px"></div>
                        <div class="media media-y margin-big-bottom"></div>

                        <div class="panel loginbox">
                            <div class="text-center margin-big padding-big-top">
                                <h1>业主登录中心</h1>
                            </div>
                            <div class="panel-body" style="padding: 30px; padding-bottom: 10px; padding-top: 10px">
                                <div class="form-group">
                                    <div class="field field-icon-right">
                                        <input type="text" class="input input-big" v-model="user.account"
                                            placeholder="登录账号" />
                                        <span class="icon icon-user margin-small"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="field field-icon-right">
                                        <input type="password" class="input input-big" v-model="user.password"
                                            placeholder="登录密码" />
                                        <span class="icon icon-key margin-small"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="field">
                                        <input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码"
                                            style="width: 225px;display: inline" />
                                        <img src="/captcha" onclick="this.src=this.src+'?'+Math.random()"
                                            title="看不清，换一张" alt="加载错误" width="100" height="44">
                                    </div>
                                </div>
                                <div style="padding: 30px">
                                    <input type="button" class="button button-block bg-main text-big input-big"
                                        @click="userLogin" value="登录" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            user: {
                account: "",
                password: ""
            }
            }
        },
    methods: {
        userLogin: function () {
                axios.post("http://localhost:8080/api/login", this.user)
                .then(function (r) {
                    console.log(r);
                    if (r.data.code == "200") {
                        alert("ok");
                        localStorage.setItem("jwt", r.headers.jwt);
                        location.href = "index.html";
                    } else if (r.data.code == "501") {
                        alert("Invalid Token,please login again!");
                        location.href = "login.html";
                    }
                });
        },
    },
}

</script> 